<template>
    <div style="margin:10px 0">
        <text class="text">{{ title }}</text>
        <div v-if="group == 'password'" class="input">
            <input v-model="theValue" type="password" @click="getFouse" @input="change"></input>
        </div>
        <div v-else class="input">
            <input v-model="theValue" @click="getFouse" @input="change"></input>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref, inject } from 'vue'
const Props = defineProps(['title', 'group'])
let firstIn = ref(true)
let theValue = ref('')
theValue = inject(Props.group)


const getFouse = () => {
    if (firstIn.value) {
        theValue.value = ''
    }
    firstIn.value = false

}
const change = (e) => {
    theValue.value = e.target.value
}
onMounted(() => {


})
</script>

<style scoped lang='scss'> .input {
     width: 300px;
     margin: 10px;
     height: 40px;

 }

 .text {
     margin: 10px;
     font-size: 20px;
     font-family: '微软雅黑';
     font-weight: 600
 }

 input {
    font-size:17px;
     outline-style: none;
     border: 2px solid #b7b7b7;
     border-radius: 5px;
     width: 100%;
     height: 100%;
     padding: 7px 12px;
     box-sizing: border-box;
     font-family: "Microsoft soft";
     color: rgb(104, 104, 104);
     font-weight: 600;
     

     &:focus {
         border-color: #000000;
         outline: 0;
         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
             #000000;
         box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.075),
             #000000;
     }
 }
</style >
